<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">NoticeBar</view>
			<view class="tui-page__desc">通告栏</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title">单行展示</view>
			<tui-notice-bar :padding="['0','30rpx']" single :content="content"></tui-notice-bar>
			<view class="tui-title">多行展示</view>
			<tui-notice-bar :padding="['16rpx','30rpx']" :content="content"></tui-notice-bar>
			<view class="tui-title">自定义颜色</view>
			<tui-notice-bar :padding="['0','30rpx']" single color="#ffff66" backgroundColor="#99cc66" bold
				:content="content">
			</tui-notice-bar>
			<view class="tui-title">滚动通告栏</view>
			<tui-notice-bar is-left scrollable color="#f54f46" :content="content">
				<template v-slot:left>
					<view class="tui-padding">
						<tui-icon name="news-fill" :size="48" unit="rpx" color="#f54f46"></tui-icon>
					</view>
				</template>
			</tui-notice-bar>
			<view class="tui-title">控制速度</view>
			<tui-notice-bar scrollable :speed="200" :content="content"></tui-notice-bar>
			<view class="tui-title">关闭通告栏</view>
			<tui-notice-bar is-right scrollable :content="content" @rightClick="close" v-if="show">
				<template v-slot:right>
					<view class="tui-padding">
						<tui-icon name="shut" :size="44" unit="rpx" color="#ff7900"></tui-icon>
					</view>
				</template>
			</tui-notice-bar>
			<view class="tui-title">动画从结束点开始播</view>
			<tui-notice-bar activeMode="forwards" is-left scrollable color="#f54f46" :content="content">
				<template v-slot:left>
					<view class="tui-padding">
						<tui-icon name="news-fill" :size="48" unit="rpx" color="#f54f46"></tui-icon>
					</view>
				</template>
			</tui-notice-bar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '激发人才创新活力 携手全球合作共赢——第十九届中国国际人才交流大会在深圳隆重举行！',
				show: true
			}
		},
		onLoad() {

		},
		methods: {
			close() {
				this.show = false;
			}
		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-padding {
		padding: 0 12rpx;
	}
</style>
